<template>
  <div class="z-select" ref="zselect" :view-id="propcheck">
    <div v-if="disabled">
      <div style="display:none">{{curcheck[childprops.name]}}</div>
      <el-input v-if="multiple" class="z-input" disabled readonly size="mini" suffix-icon="el-icon-arrow-up" v-model="arrtext"></el-input>

      <el-input v-if="!multiple" v-model="curcheck[childprops.name]" :disabled="true" class="z-input" size="mini" suffix-icon="el-icon-arrow-up"></el-input>
    </div>
    <div v-else @click='foucsOption'>
      <el-input v-if="!multiple" class="z-input" placeholder="请选择" readonly size="mini" suffix-icon="el-icon-arrow-up" :class="{'z-show':showTree}" v-model="curcheck[childprops.name]"></el-input>
      <el-input v-if="multiple" class="z-input" placeholder="请选择" readonly size="mini" suffix-icon="el-icon-arrow-up" :class="{'z-show':showTree}" v-model="arrtext"></el-input>
    </div>
    <!-- v-show="showTree" -->
    <transition :name="less?'lessmove':'donghua'">
      <div class="z-dropdown" v-show="showTree" :class="{'less':this.less}">
        <div class="z-options">
          <ztree :viewinfo="viewinfo" :checkass="checkass" :allcheck="allcheck" :regchild="regchild" :isexpand="isexpandSlot" :defaults="curchecked" :level="1" :arrdefaults='arrcurchecked' :multiple="multiple" v-for="item in treedata" :key="item.id" :datas="item" :childprops="childprops" :showLv='2' v-on:curcheck="curCheck" v-on:show="show"></ztree>
        </div>
        <div class="z-save">{{ishave}}
          <span class="z-toggle" @click="toggleTree" v-if="isHide">{{isexpandSlot?'全部收起':'全部展开'}}</span>
          <el-button size="mini" @click="selectSave">确定</el-button>
        </div>

      </div>
    </transition>

  </div>

</template>

<script>
import ztree from "./tree.vue";
export default {
  name: "ztree-select",
  components: {
    ztree
  },
  model: {
    prop: "checked",
    event: "change"
  },
  props: {
    checked: {
      default : null
    },
    multiple: Boolean,
    treedata: {
      type: Array
    },
    childprops: {
      type: Object,
      default: {
        name: "displayName",
        children: "orgs",
        lv: "depth"
      }
    },
    disabled: {
      type: Boolean
    },
    viewinfo: {
      type: Boolean,
      default: false
    },
    allcheck:{
      type:Boolean
    },
    checkass:{
      type:Boolean,
      default:false
    },
    regchild:{
      type:Boolean,
      default:false
    }
    // isexpand:{
    //   type:Boolean,
    //   default:true
    // }
  },
  data() {
    return {
      select: false,
      curcheck: {}, //单选
      showTree: false,
      arr: [], //多选
      arrtext: "",
      curchecked: "",
      arrcurchecked: [],
      namearrs: [],
      isexpandSlot: true,
      isexpand: true,
      less: false,
      isHide:true,
    };
  },
  computed: {
    ishave() {
      this.isexpandSlot = this.isexpand;
    },
    propcheck() {
      // if (this.multiple) {
      //   this.arrcurchecked = this.checked;
      //   if (this.checked.length > 0) {
      //     this.arrtext = "已选择" + this.checked.length + "项";
      //   } else {
      //     this.arrtext = "";
      //   }
      // } else {
      //   this.curchecked = this.checked;
      //   console.log(this.checked)
      //   console.log('33333333333')
      //   console.log(this.curchecked)
      // }
    }
  },
  created() {},
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    // let getbound = this.$refs.zselect.offsetTop;
    // console.log(getbound,'22222222222222222222222222222')
    setTimeout(() => {
      this.handleScroll();
      document.addEventListener("click", e => {
        if (this.$refs.zselect) {
          if (!this.$refs.zselect.contains(e.target)) {
            this.showTree = false;
          } else {
          }
        }
      });
    }, 500);
//  if(this.treedata.length>1){
//         console.log("33333")
//         this.isHide = false
//       }
    this.setDefaultValue();
  },
  watch: {
    checked(val) {
      this.setDefaultValue();
     
    },
    curchecked(val) {
      this.setDefaultValue();
    },
     allcheck(val){
      
    }
  },
  methods: {
    show(val) {
      let treedata = this.treedata;
      if (treedata.length == 1) {
        // if (val == 1) {
        //   this.isexpandSlot = false;
        // } else {
        //   this.isexpandSlot = true;
        // }
      }
    },
    toggleTree() {
      this.isexpandSlot = !this.isexpandSlot;
    },
    //滚动
    handleScroll() {
      function getElementPageTop(element) {
        var actualTop = element.offsetTop;
        var parent = element.offsetParent;
        while (parent != null) {
          actualTop +=
            parent.offsetTop + (parent.offsetHeight - parent.clientHeight) / 2;
          parent = parent.offsetParent;
        }
        return actualTop;
      }
      if (this.$refs.zselect) {
        let actualTop = getElementPageTop(this.$refs.zselect); //得到元素距离文档的绝对位置
        let sheight = document.body.scrollHeight;
       // console.log(actualTop, sheight, sheight - actualTop);
        if (actualTop > 280 && sheight - actualTop < 310) {
          this.less = true;
        }
      }

      // console.log(getElementPageTop(this.$refs.zselect))
      //   var scrollTop =
      //     window.pageYOffset ||
      //     document.documentElement.scrollTop ||
      //     document.body.scrollTop;
      //   // console.log(scrollTop)
      //   //console.log(document.body.clientHeight)
      //   var ht = document.body.clientHeight; //浏览器窗口高
      //   var scrolltop = document.body.scrollTop; //滚动高度、网页卷去的高度
      //   var bottom = this.$refs.zselect.getBoundingClientRect().bottom;

      //   console.log(ht,bottom,'我就不信了')
      //   //console.log(bottom)
      //   if( ht - bottom < 280){
      //     console.log("小于规定尺寸");
      //     this.less = true;

      //   }

      //   var offsetTop = this.$refs.zselect.getBoundingClientRect();

      //   console.log(offsetTop, "22w");
    },
    //设置初始值
    setDefaultValue() {
      if (this.multiple) {
        this.arrcurchecked = this.checked;
        if (this.checked.length > 0) {
          this.arrtext = "已选择" + this.checked.length + "项";
        } else {
          this.arrtext = "";
        }
      } else {
       
        if(this.checked == '' ||this.checked == null){
          this.curcheck = ''
        }else{
        this.curchecked = this.checked;
        }
        
      }
      if (!this.multiple) {
        this.setSelected(this.checked);
      } else {
        this.setCheckedKeys(this.checked);
      }
    },
    setSelected(val) {
      //单选
      this.curchecked = val;
    },
    setCheckedKeys() {
      //多选
      this.arrcurchecked = this.checked;
      if (this.checked.length > 0) {
        this.arrtext = "已选择" + this.checked.length + "项";
      } else {
        this.arrtext = "";
      }
    },
    dds() {
      this.curchecked = this.checked;
    },
    curCheck(val) {
      if (this.multiple) {
        this.arr = val;
        // let arr = this.uq(val);
        let arr = val;
        console.log(val)
        this.$emit("change", arr);
      } else {
        // console.log("走没走这里")
        this.curcheck = val;
        this.curchecked = val.id;
        this.$emit("change", val.id);
      }
    },
    //排序
    uq(array) {
      function sorts(a, b) {
        return a - b;
      }
      array.sort(sorts);
      return array;
    },
    selectSave() {
      //let data = this.curcheck;
      this.showTree = false;
    },
    foucsOption() {
    //  console.log("dd");
      this.showTree = !this.showTree;
    },
    handleClose() {}
  }
};
</script>

<style lang="scss" scoped>
.z-select {
  display: inline-block;
  position: relative;
  // width: 230px;
}
.z-dropdown {
  padding-bottom: 40px;
  position: absolute;
  min-width: 300px;
  // width: 100%;
  height: 280px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  z-index: 81111;
  transition: height ease 0.3s, opacity ease 0.3s, transform ease 0.3s;
}
.z-options {
  width: 100%;
  height: 237px;
  overflow-y: auto;
  position: absolute;
  z-index: 1001;
  border-bottom: 1px solid #e4e7ed;
}
.z-save {
  position: absolute;
  left: 0;
  bottom: 5px;
  text-align: right;
  width: 100%;
  padding: 10px;
  height: 40px;
}
.z-toggle {
  display: block;
  width: 100px;
  height: 28px;
  line-height: 28px;
  text-align: left;
  color: #027dca;
  cursor: pointer;
  position: absolute;
  left: 10px;
  top: 10px;
}
.donghua-enter-active {
  height: 280px;
  opacity: 1;
  overflow: hidden;
}
.donghua-leave-active {
  height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}
.lessmove-enter-active {
  height: 280px;
  opacity: 1;
  overflow: hidden;
  //
}
.lessmove-leave-active {
  // transform:translateY(0px)!important   ;
  height: 280px;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  //  transform:scaleY(0)
}
.less {
  // top: -280px;
  transform: translateY(-310px);
}
</style>
<style>
.z-input .el-input__inner {
  cursor: pointer;
}
.z-input .el-input__suffix {
  cursor: pointer;
  transform: rotate(180deg);
}
.z-input.z-show .el-input__suffix {
  transform: rotate(0);
}
.z-select .el-input--mini .el-input__icon {
  font-size: 14px;
}
</style>

